<ion-view view-title="" hide-nav-bar="false">
    <ion-nav-bar class="bar-positive no-border" align-title="center">
        <ion-nav-buttons side="left">
            <button class="button back-button buttons button-clear" ui-sref="remind-list" nav-direction="back">
                <i class="icon ion-arrow-left-c"></i>
            </button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button class="button button-clear" ng-click="remindDetailCtrl.update()" ng-if="remindDetailCtrl.modified && remindDetailCtrl.canEdit()">
                <i class="icon ion-checkmark-round"></i>
            </button>
            &nbsp;
            <button class="button button-clear" ng-click="deleteRemind(remindDetailCtrl.model.id)">
                <i class="icon ion-trash-a"></i>
            </button>
            &nbsp;
            <button class="button button-clear" ng-click="remindDetailCtrl.showSharePost()">
                <i class="icon ion-qr-scanner"></i>
            </button>
            &nbsp;
            <button class="button button-clear" ng-click="remindDetailCtrl.promptShare()">
                <i class="icon ion-share"></i>
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-content>
        <div class="list positive-bg content-input">
            <div class="item item-input positive-bg no-border action-sheet-up"></div>
            <label class="item item-input positive-bg no-border">
                <input type="text" id="remind-title" ng-disabled="!remindDetailCtrl.canEdit()" ng-required placeholder="请输入提醒内容" ng-model="remindDetailCtrl.model.title">
            </label>
        </div>
        <div class="list">
            <label class="item item-input no-top-border">
                <i class="icon ion-ios-clock-outline placeholder-icon"></i>
                <input type="datetime-local" required ng-disabled="!remindDetailCtrl.canEdit()" placeholder="事件时间" ng-model="remindDetailCtrl.model.time">
            </label>
            <label class="item item-input">
                <i class="icon ion-ios-bell-outline placeholder-icon"></i>
                <input type="text" placeholder="提醒时间" readonly ng-disabled="!remindDetailCtrl.canEdit()" ng-model="remindDetailCtrl.model.defer" nature-time-defer ng-focus="remindDetailCtrl.showDeferPicker()">
            </label>
            <label class="item item-input">
                <i class="icon ion-refresh placeholder-icon"></i>
                <input type="text" placeholder="重复周期" readonly ng-disabled="!remindDetailCtrl.canEdit()" ng-model="remindDetailCtrl.model.repeat" nature-repeat ng-focus="remindDetailCtrl.showRepeatPicker()">
            </label>
            <!-- Should be "ng-show" here, for WeChat will show the first found image when sharing -->
            <label class="item item-input item-participant" ng-click="remindDetailCtrl.showParticipants()">
                <i class="icon ion-ios-people-outline placeholder-icon"></i>
                <input type="text" placeholder="参与人数" readonly ng-disabled="!remindDetailCtrl.canEdit()" value="{{ remindDetailCtrl.model.participants && (remindDetailCtrl.model.participants.length+1+'人参与') }}" />
                <img class="item-image" ng-src="{{ p.headimgurl }}" alt="{{ p.nickname }}" ng-repeat="p in [remindDetailCtrl.model.owner].concat(remindDetailCtrl.model.participants||[]) | limitTo: 6" />
            </label>
            <div class="item item-input">
                <!--<i class="icon placeholder-icon" ng-class="remindDetailCtrl.model.media_id ? 'ion-android-volume-up positive' : 'ion-document'" ng-click="remindDetailCtrl.playMedia()"></i> -->
                <i class="icon placeholder-icon ion-document"></i>
                <textarea placeholder="请输入备注(可选)" rows="3" ng-disabled="!remindDetailCtrl.canEdit()" ng-model="remindDetailCtrl.model.desc"></textarea>
            </div>
            <audio style="display:none" id="mediaBox"></audio>
        </div>
    </ion-content>

    <ion-footer-bar align-title="center" class="bar-balanced item-remove-animate" ng-if="message">
        <h1 class="title">{{ message }}</h1>
    </ion-footer-bar>

    <script id="participant-model.html" type="text/ng-template">
        <ion-list class="participant-model">
            <ion-item class="item-avatar"
                      ng-repeat="p in [remindDetailCtrl.model.owner].concat(remindDetailCtrl.model.participants||[])">
                <img ng-src="{{ p.headimgurl }}" alt="{{ p.nickname }}">
                <h2>{{ p.nickname }}</h2>
            </ion-item>
        </ion-list>
    </script>
</ion-view>
